<template>
  <span v-if="rootVisible" ref="rootRef">
    <slot></slot>
  </span>
  <template v-else>
    <template v-if="isEllipsis">
      <a-tooltip :title="content">
        <slot></slot>
      </a-tooltip>
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </template>
</template>

<script setup name="ellipsis">
  import { ref, watch, onMounted } from 'vue';
  const props = defineProps({
    content: {
      type: String,
      default: ''
    },
    dir: {
      type: String,
      default: 'horizontal'
    }
  });
  const rootRef = ref(null);
  const rootVisible = ref(true);
  const isEllipsis = ref(false);
  onMounted(() => {
    let el = rootRef.value,
      range = document.createRange();
    range.setStart(el, 0);
    range.setEnd(el, el.childNodes.length);
    if (props.dir == 'horizontal' && range.getBoundingClientRect()['width'] > el.getBoundingClientRect()['width']) {
      isEllipsis.value = true;
    }
    if (props.dir == 'vertical' && range.getBoundingClientRect()['height'] > el.getBoundingClientRect()['height']) {
      isEllipsis.value = true;
    }
    rootVisible.value = false;
  });
</script>
